<template>
    <view class="error-page">
        <CustNavBar
            v-if="isShowNavBar"
            :title="navBarTitle"
            :isShowLeft="navBarShowLeft"
            :bgColor="navBarBgColor"
            :color="navBarTextColor"></CustNavBar>
        <image :src="defaltIcon || img" alt="" :style="{ width: imgWidth + 'rpx', height: imgHeight + 'rpx' }" class="error-page__img" />
        <text class="error-page__text">{{ defaultText || errorText }}</text>
        <u-button
            v-if="isShowBtn"
            @click="handleButton"
            color="#0069FF"
            text="刷新"
            plain
            shape="circle"
            :customStyle="{ width: '320rpx', height: '76rpx', 'margin-top': '100rpx' }"></u-button>
        <text v-if="errorId" class="error-page__id">错误id: {{ errorId }}</text>
    </view>
</template>

<script>
import CustNavBar from '@/components/navBar';
import PupIcon from '@/static/images/default/pup-icon.png';
import NetworkIcon from '@/static/images/default/network-icon.png';
export default {
    name: 'errorPage',
    emits: ['back'],
    components: {
        CustNavBar
    },
    props: {
        // 场景 global（全局）|| local（局部）|| tab（标签）
        scene: {
            type: String,
            value: 'page'
        },
        // 类型 pup ｜ network
        type: {
            type: String,
            default: 'pup'
        },
        isShowNavBar: {
            type: Boolean,
            default: true
        },
        navBarTitle: {
            type: String,
            default: '运输平台'
        },
        navBarShowLeft: {
            type: Boolean,
            default: true
        },
        navBarBgColor: {
            type: String,
            default: '#fff'
        },
        navBarTextColor: {
            type: String,
            default: '#303133'
        },
        img: {
            type: String,
            default: PupIcon
        },
        imgWidth: {
            type: Number,
            default: 320
        },
        imgHeight: {
            type: Number,
            default: 240
        },
        errorText: {
            type: String,
            default: '出错啦~'
        },
        // 返回按钮
        isShowBtn: {
            type: Boolean,
            default: true
        },
        errorId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            defaltIcon: '',
            defaultText: ''
        };
    },
    watch: {
        type: {
            handler(val) {
                let emptyText = null;
                let img = null;
                switch (val) {
                    case 'network':
                        img = NetworkIcon;
                        emptyText = '网络崩溃了～';
                        break;
                    default:
                        img = PupIcon;
                        emptyText = '出错了~';
                        break;
                }
                this.defaultText = emptyText;
                this.defaltIcon = img;
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        /**
         * 刷新页面
         * */
        handleButton() {
            // 获取页面实例
            const pages = getCurrentPages();
            const ctx = pages[pages.length - 1];
            const route = ctx.route;
            const options = ctx.options;

            const paramsArr = [];
            for (const i in options) {
                paramsArr.push(`${i}=${encodeURIComponent(options[i])}`);
            }

            const params = paramsArr.join('&');

            if (this.scene === 'tab') {
                // 如果是Tab页面需要重启应用
                wx.reLaunch({
                    url: `/${route}?${params}`
                });
            } else {
                // 刷新当前页
                wx.redirectTo({
                    url: `/${route}?${params}`
                });
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.error-page__img {
    display: block;
    margin: 200rpx auto 0;
}

.error-page__text {
    display: block;
    text-align: center;
    color: #606060;
    font-size: 28rpx;
}
.error-page__id {
    display: block;
    text-align: center;
    color: #505050;
    font-size: 24rpx;
    margin-top: 50rpx;
}
</style>
